<template>
  <v-container style="max-width: 600px" class="mt-10 mb-10">
    <v-timeline dense clipped>
      <v-timeline-item fill-dot class="white--text mb-12" color="orange" large>
        <template v-slot:icon>
          <span>记</span>
        </template>
      </v-timeline-item>

      <template v-for="(log, index) in logs">
        <v-timeline-item
          class="mb-4"
          :color="log.color"
          icon-color="grey lighten-2"
          small
          :key="index"
        >
          <v-row justify="space-between">
            <v-col cols="7"> {{ log.message }} </v-col>
            <v-col class="text-right" cols="5">
              {{ log.createTime.slice(0, 19) }}
            </v-col>
          </v-row>
        </v-timeline-item>
      </template>
    </v-timeline>
  </v-container>
</template>

<script>
export default {
  name: "TimeLine",
  data() {
    return {
      logs: [],
    };
  },
  mounted() {
    this.$axios.get("/log/alllog").then((response) => {
      this.logs = response.data.data;
    });
  },
};
</script>

<style>
</style>